<script setup lang="ts">
import {getSearch} from "@/api/more";
import {ref} from "vue";

let FlList= ref()
getSearch().then(res=>{
    if (res.code === 200){
        FlList.value = res.rows[4].itemList.map(item =>{
            item.mediaLink = 'http://192.168.5.120:8199' + item.mediaLink
            return item
        })
    }
    // console.log(FlList.value)
})
</script>

<template>
    <div>
        <div id="banner"></div>
        <div id="main">
            <div class="one" v-for="item in FlList" :key="item.id">
                <img :src="item.mediaLink" alt="">
                <h4>{{item.title}}</h4>
                <p>{{item.intro}}</p>
                <p>
                    <span>了解详情</span>
                    <img src="@/assets/images/left-circle.png" alt="">
                </p>
            </div>
        </div>
    </div>
</template>

<style scoped lang="less">
#banner{
    width: 375px;
    height: 160px;
    background-image: url("@/assets/images/0bc5f9e6c4b9fc5a1ec0e4a18671f2c.png");
    background-repeat: no-repeat;
    background-size: 375px 160px;
}
#main{
    width: 350px;
    margin: -70px auto 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    background-color: white;

    .one{
        width: 118.5pt;
        height: 140pt;
        margin-bottom: 10px;

        img{
            width: 158px;
            height: 95px;
        }
        h4{
            font-weight: 500;
        }
        p{
            font-size: 12px;
        }
        p:nth-of-type(1){
            color:gray;
            line-height: 12pt;
            font-family: '苹方-简 常规体',serif;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        p:nth-of-type(2){
            display: flex;
            justify-content: space-between;
            align-items: center;

            span{
                color:red;
            }
            img{
                width: 16px;
                height: 16px;
            }
        }
    }
}
</style>